<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 具名插槽用法一 -->
        <base-layout>
            <p slot="header">这里的内容会被添加到叫header的slot标签中</p>
            <p>这里的内容加到没名字的slot中</p>
            <p slot="footer">这里的内容会被添加到叫footer的slot标签中</p>
            <p>这里的内容加到没名字的slot中</p>
            <p>组件标签里面的顺序没啥用,内容顺序只跟组件模板里面顺序有关</p>
        </base-layout>

        <!-- 居民插槽用法二 -->
        <!-- 方法一能包括一个标签,加上template可以有多个标签 -->
        <base-layout>
            <template slot="header">
                <p>这是第二个方法的header</p>
                <p>这是第二个方法的header</p>
                <p>这是第二个方法的header</p>
            </template>
            <template>
                这是第二个方法的空白
            </template>
            <template slot="footer">
                <p>这是第二个方法的footer</p>
                <p>这是第二个方法的footer</p>
                <p>这是第二个方法的footer</p>
            </template>

        </base-layout>
    </div>
    <script src="../js/vue.min.js"></script>
    <script>
        // 具名插槽就是有名字的插槽
        Vue.component('base-layout', {
            template: `
            <div>
                  <slot name='header'></slot>  
                  <slot></slot>  
                  <slot name='footer'></slot>  
            </div>
            `,
        })
        let vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>